// 样式
import '../style/nav.css'

export default function Nav() {

    return (

        <div style={{ width: '100%', height: '100%' }}>
            {/* 头部 */}
            <div style={{ backgroundColor: '#6966eb', width: '100%', height: '60px', boxShadow: ' 0px 0px 5px 0px rgba(174, 174, 174, 0.44)' }}>
                <div style={{ display: 'flex', width: '1003px', margin: 'auto', alignItems: 'center', height: '100%' }}>

                    <div style={{ width: '250px', height: '60px', lineHeight: '75px' }}><img style={{ width: '170px', height: '30px' }} src="../src/images/index-logo.png" /> </div>

                    <div style={{ width: '655px', height: '60px', lineHeight: '30px' }}>
                        <div style={{ display: 'flex', width: '400px', height: '60px', lineHeight: '60px' }}>
                            <div className='headUl' style={{ width: '90px', height: '57px', textAlign: 'center' }}><a href="" style={{ color: '#fff', textDecoration: 'none' }}>首页</a></div>
                            <div className='headUl' style={{ width: '90px', height: '57px', textAlign: 'center' }}><a href="" style={{ color: '#fff', textDecoration: 'none' }}>考试</a></div>
                            <div className='headUl' style={{ width: '90px', height: '57px', textAlign: 'center' }}><a href="" style={{ color: '#fff', textDecoration: 'none' }}>错题本</a></div>
                            <div className='headUl' style={{ width: '90px', height: '57px', textAlign: 'center' }}><a href="" style={{ color: '#fff', textDecoration: 'none' }}>收藏夹</a></div>
                        </div>
                    </div>

                    <div style={{ width: '168px', height: '60px', textAlign: 'center', lineHeight: '60px', color: '#fff', display: 'flex', justifyContent: 'space-around' }}>
                        <span>登录</span>|<span>注册</span>
                    </div>
                </div>
            </div>

            {/* 内容 */}
            <div style={{ width: '100%', backgroundColor: '#fff', overflow: 'hidden', position: 'relative' }}>
                {/* 背景 */}
                <img style={{ width: '100%', height: '100%' }} src={"../src/images/banner.png"} />
                {/* 分类 */}
                <div style={{ width: '1000px', height: '150px', margin: '0 auto', display: 'flex', justifyContent: 'space-around', position: 'absolute', top: '530px', left: '250px' }}>

                    <div style={{ backgroundColor: '#fff', width: '180px', height: '180px', boxShadow: '0px 0px 5px 0px rgba(174, 174, 174, 0.44)', borderRadius: '4px', textAlign: 'center', }}>
                        <img style={{ width: '90px', height: '89px', marginTop: '30px', marginBottom: '10px' }} src={"../src/images/icon-1.png"} />
                        <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>正在考试</p>
                    </div>

                    <div style={{ backgroundColor: '#fff', width: '180px', height: '180px', boxShadow: '0px 0px 5px 0px rgba(174, 174, 174, 0.44)', borderRadius: '4px', textAlign: 'center', }}>
                        <img style={{ width: '90px', height: '89px', marginTop: '30px', marginBottom: '10px' }} src={"../src/images/icon-2.png"} />
                        <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>模拟考试</p>
                    </div>

                    <div style={{ backgroundColor: '#fff', width: '180px', height: '180px', boxShadow: '0px 0px 5px 0px rgba(174, 174, 174, 0.44)', borderRadius: '4px', textAlign: 'center', }}>
                        <img style={{ width: '90px', height: '89px', marginTop: '30px', marginBottom: '10px' }} src={"../src/images/icon-3.png"} />
                        <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>每日一测</p>
                    </div>

                    <div style={{ backgroundColor: '#fff', width: '180px', height: '180px', boxShadow: '0px 0px 5px 0px rgba(174, 174, 174, 0.44)', borderRadius: '4px', textAlign: 'center', }}>
                        <img style={{ width: '90px', height: '89px', marginTop: '30px', marginBottom: '10px' }} src={"../src/images/icon-4.png"} />
                        <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>顺序练习</p>
                    </div>

                    <div style={{ backgroundColor: '#fff', width: '180px', height: '180px', boxShadow: '0px 0px 5px 0px rgba(174, 174, 174, 0.44)', borderRadius: '4px', textAlign: 'center', }}>
                        <img style={{ width: '90px', height: '89px', marginTop: '30px', marginBottom: '10px' }} src={"../src/images/icon-5.png"} />
                        <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>分类练习</p>
                    </div>

                </div>
                {/* 严肃考试 */}
                <div style={{ width: '100%', marginTop: '100px' }}>
                    <div style={{ width: '850px', margin: '0 auto' }}>
                        {/* top */}
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <p style={{ color: '#373737', letterSpacing: '0px', fontSize: '30px', fontWeight: 'bold' }}>严肃考试</p>
                            <p style={{ position: 'absolute', top: '-28px', left: '312px', color: '#000', opacity: '0.15', letterSpacing: '2px', fontSize: '30px' }}>EXAMINATION</p>
                        </div>
                        {/* bottom1 */}
                        <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '40px' }}>
                            <img style={{ width: '270px', height: '270px' }} src="../src/images/img-1.png" alt="" />
                            <div style={{ color: '#666', letterSpacing: '1px', fontSize: '15px', lineHeight: '28px', position: 'relative' }}>
                                <ul style={{ listStyleType: 'circle' }}>
                                    <li>适用于高校考试、认证考试、招聘考试等严格防作弊场景 </li>
                                    <li>学员考前调试设备，本地备份答案及云端同步，断电断网续考 </li>
                                    <li>人脸识别与权威数据库比对，AI监考中心三路音视频实时监考 </li>
                                    <li>支持匿名判卷及分题分学员判卷，避免判卷过程的舞弊行为 </li>
                                </ul>
                                <div style={{ backgroundColor: '#726fff', width: '110px', height: '40px', fontSize: '15px', letterSpacing: '1px', textAlign: 'center', lineHeight: '40px', position: 'absolute', right: '0px', bottom: '60px', color: '#fff' }}>探索更多</div>
                            </div>
                        </div>

                    </div>


                </div>
                {/* 数据统计 */}
                <div className='bg-1' style={{ width: '100%', height: '500px', overflow: 'hidden' }}>

                    <div style={{ textAlign: 'center', position: 'relative', marginTop: '150px' }}>
                        <p style={{ color: '#373737', letterSpacing: '0px', fontSize: '30px', fontWeight: 'bold' }}>数据统计</p>
                        <p style={{ position: 'absolute', top: '-28px', left: '601px', color: '#000', opacity: '0.15', letterSpacing: '2px', fontSize: '30px' }}>DATA STATISTICS
                        </p>
                    </div>

                    <div style={{ width: '1000px', height: '200px', margin: '0 auto', display: 'flex', justifyContent: 'space-around' }}>

                        <div style={{ width: '200px', height: '200px', backgroundColor: '#fff', borderRadius: '5px', textAlign: 'center', overflow: 'hidden', position: 'relative' }}>
                            <div style={{ width: '120px', height: '120px', margin: '0 auto', marginTop: '20px', marginBottom: '15px', borderRadius: '50%', backgroundColor: '#726fff', opacity: '0.33' }}></div>
                            <div style={{ width: '95px', height: '95px', borderRadius: '50%', backgroundColor: '#726fff', color: 'white', textAlign: 'center', lineHeight: '95px', margin: '0 auto', position: 'absolute', top: '32px', left: '53px' }}> <span style={{ fontSize: '30px' }}>186</span>道 </div>
                            <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>练习题数</p>
                        </div>

                        <div style={{ width: '200px', height: '200px', backgroundColor: '#fff', borderRadius: '5px', textAlign: 'center', overflow: 'hidden', position: 'relative' }}>
                            <div style={{ width: '120px', height: '120px', margin: '0 auto', marginTop: '20px', marginBottom: '15px', borderRadius: '50%', backgroundColor: '#eb66ab', opacity: '0.33' }}></div>
                            <div style={{ width: '95px', height: '95px', borderRadius: '50%', backgroundColor: '#eb66ab', color: 'white', textAlign: 'center', lineHeight: '95px', margin: '0 auto', position: 'absolute', top: '32px', left: '53px' }}> <span style={{ fontSize: '30px' }}>5</span>天 </div>
                            <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>学习天数</p>
                        </div>

                        <div style={{ width: '200px', height: '200px', backgroundColor: '#fff', borderRadius: '5px', textAlign: 'center', overflow: 'hidden', position: 'relative' }}>
                            <div style={{ width: '120px', height: '120px', margin: '0 auto', marginTop: '20px', marginBottom: '15px', borderRadius: '50%', backgroundColor: '#ab66eb', opacity: '0.33' }}></div>
                            <div style={{ width: '95px', height: '95px', borderRadius: '50%', backgroundColor: '#ab66eb', color: 'white', textAlign: 'center', lineHeight: '95px', margin: '0 auto', position: 'absolute', top: '32px', left: '53px' }}> <span style={{ fontSize: '30px' }}>66</span>分 </div>
                            <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>最近考试</p>
                        </div>

                        <div style={{ width: '200px', height: '200px', backgroundColor: '#fff', borderRadius: '5px', textAlign: 'center', overflow: 'hidden', position: 'relative' }}>
                            <div style={{ width: '120px', height: '120px', margin: '0 auto', marginTop: '20px', marginBottom: '15px', borderRadius: '50%', backgroundColor: '#e366eb', opacity: '0.33' }}></div>
                            <div style={{ width: '95px', height: '95px', borderRadius: '50%', backgroundColor: '#e366eb', color: 'white', textAlign: 'center', lineHeight: '95px', margin: '0 auto', position: 'absolute', top: '32px', left: '53px' }}> <span style={{ fontSize: '30px' }}>74</span>分 </div>
                            <p style={{ margin: 0, color: '#666', letterSpacing: '1px' }}>平均天数</p>
                        </div>

                    </div>

                </div>

                {/* 考试公告 */}
                <div style={{ width: '100%', height: '400px', marginTop: '35px' }}>
                    <div style={{ width: '960px', height: '300px', margin: '0 auto' }}>
                        {/* top */}
                        <div style={{ textAlign: 'center', position: 'relative' }}>
                            <p style={{ color: '#373737', letterSpacing: '0px', fontSize: '30px', fontWeight: 'bold' }}>考试公告</p>
                            <p style={{ position: 'absolute', top: '-28px', left: '342px', color: '#000', opacity: '0.15', letterSpacing: '2px', fontSize: '30px' }}>ANNOUNCEMENT</p>
                        </div>
                        {/* bottom */}
                        <div style={{display:'flex',justifyContent:'space-around', width: '100%', height: '100%', backgroundColor: '#fff', boxShadow: '0px 1px 1px 2px #f5f5f5', borderRadius: '4px' }}>
                           
                            <img style={{ height: '100%' }} src="../src/images/img-2.png" alt="" />
                            
                            <div>
                                <div style={{width:'250px',height:'35px',display:'flex',justifyContent:'space-around'}}>
                                    <span style={{width:'50px',height:'30px',fontSize:'15px',textAlign:'center',lineHeight:'30px',border:'1px solid #726fff',backgroundColor:'#726fff',color:'white',borderRadius:'13px'}}>全部</span>
                                    <span style={{width:'50px',height:'30px',fontSize:'15px',textAlign:'center',lineHeight:'30px',border:'1px solid #726fff',backgroundColor:'#fff',color:'#726fff',borderRadius:'13px'}}>全部</span>
                                    <span style={{width:'90px',height:'30px',fontSize:'15px',textAlign:'center',lineHeight:'30px',border:'1px solid #726fff',backgroundColor:'#fff',color:'#726fff',borderRadius:'13px'}}>一个月前</span>
                                </div>
                                <div className='p'>
                                    <p style={{fontWeight:'bold',marginTop:'10px',marginBottom:'5px'}}>2022年安徽公务员考试公告</p>
                                    <p style={{color:'#666'}}>关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告 为认真贯</p>
                                    <p style={{color:'#666'}}>彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...</p>
                                </div>
                                <hr />
                                <div className='p'>
                                    <p style={{fontWeight:'bold',marginTop:'10px',marginBottom:'5px'}}>关于2022年我省高职单招考试推迟举行的公告</p>
                                    <p style={{color:'#666'}}>关于2022年我省高职单招考试推迟举行的公告 鉴于当前我省新冠肺炎疫情防</p>
                                    <p style={{color:'#666'}}>控形势，为保障广大考生身体健康和生命安全，经研究，原定于4月9日...</p>
                                </div>
                                <hr />
                                <div className='p'>
                                    <p style={{fontWeight:'bold',marginTop:'10px',marginBottom:'5px'}}>教师资格证考试公告_中小学教师资格证考试资讯</p>
                                    <p style={{color:'#666'}}>中小学和幼儿园教师资格考试公告栏目提供全国中小学和幼儿园教师资格考</p>
                                    <p style={{color:'#666'}}>试最新公告,全国教师资格现场确认安排,全国教师资格考试成绩查询,全国教...</p>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>


            {/* 底部 */}
            <div style={{ backgroundColor: '#726fff', width: '100%', height: '50px', textAlign: 'center', lineHeight: '50px', color: '#fff' }}>
                <p style={{ margin: 0, }}> Copyright © 2021  成都蜗牛创想科技有限公司</p>
            </div>

        </div >
    )

}